<!--  -->
<template>
 <div class="model" v-show="isshowquote" ref="wrap">
    <div class="layui-layer layui-layer-page content ">
      <div class="layui-layer-title">请输入引用内容
        <i class="layui-icon layui-icon-close" @click="close">X</i>
      </div>
      <div class="layui-layer-content">
        <div class="layui-text">
          <textarea class="layui-textarea fly-editor" name="content" v-model="quote">
          </textarea>
           
        </div>
      
      </div>
        <div class="btn">
          <button class="layui-btn layui-btn-normal" @click="confirm" >确定</button>
          <button class="layui-btn layui-btn-primary" @click="close" >取消</button>
        </div>


    </div>
  </div>
</template>

<script>
export default {
 name: 'Quote', 
 components: {

},
props:{
  isshowquote: {
      default:false,
      type: Boolean
    },
    ctrl:{}
},
 data () {
  return {
    quote:''
  };
 },

 computed: {},

 mounted () {
   this.$nextTick(()=>{
    document.querySelector('body').addEventListener('click',this.handleBodyClick)
   })
 },
beforeDestory(){
  document.querySelector('body').addEventListener('click',this.handleBodyClick)
},
 methods: {
  handleBodyClick(e){
    e.stopPropagation()
        if(typeof this.ctrl === 'undefined'){return}
        if(!(this.ctrl.contains(e.target) || this.$refs.wrap.contains(e.target))){
          this.$emit('closequote')
        } 
  },
   close(){
     this.$emit('closequote')
   },
   confirm(){
    this.quote = this.quote
    this.$emit('getquote',this.quote)
    this.$emit('closequote')
   }
 }
}

</script>
<style scoped lang='scss' >
    .layui-layer-title{
        padding: 0px 10px 0 20px;
    }
    .content{
        position: absolute;
        top: 43px;
    }
    .layui-icon{
    cursor: pointer;
    float: right;
  }
  .layui-layer{
      width: 600px;
  }
  .fly-editor{
      margin: 5% 5%;
      width: 90%;
      height: 60px;
  }
  .btn{
   display: flex;
   justify-content: flex-end;
   margin: 0px 20px 20px 0;
  }
 
</style>